Code Playground

* {
	border: 0;
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}
:root {
	--hue: 223;
	--bg: hsl(var(--hue),90%,90%);
	--fg: hsl(var(--hue),90%,10%);
	--trans-dur: 0.3s;
	font-size: calc(16px + (24 - 16) * (100vw - 320px) / (2560 - 320));
}
body {
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1em/1.5 sans-serif;
	height: 100vh;
	transition:
		background-color var(--trans-dur),
		color var(--trans-dur);
}
.pl {
	display: block;
	margin: auto;
	width: 16em;
	height: auto;
}
.pl line {
	animation-duration: 3s;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}
.pl__line1,
.pl__line9 {
	animation-name: line1;
}
.pl__line2,
.pl__line8 {
	animation-name: line2;
}
.pl__line3,
.pl__line7 {
	animation-name: line3;
}
.pl__line4,
.pl__line6 {
	animation-name: line4;
}
.pl__line5 {
	animation-name: line5;
}

/* Dark theme */
@media (prefers-color-scheme: dark) {
	:root {
		--bg: hsl(var(--hue),90%,10%);
		--fg: hsl(var(--hue),90%,90%);
	}
}

/* Animations */
@keyframes line1 {
	from,
	8% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	18% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	28% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	38% {
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	48% {
		opacity: 1;
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	53% {
		opacity: 0;
		stroke-dashoffset: 31.99;
		transform: translate(8px,16px);
	}
	56% {
		animation-timing-function: steps(1,start);
		opacity: 0;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	60% {
		animation-timing-function: ease-out;
		opacity: 1;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	70% {
		animation-timing-function: ease-in-out;
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	80% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	90% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	to {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
}
@keyframes line2 {
	from,
	6% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	16% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	26% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	36% {
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	46% {
		opacity: 1;
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	51% {
		opacity: 0;
		stroke-dashoffset: 31.99;
		transform: translate(8px,16px);
	}
	54% {
		animation-timing-function: steps(1,start);
		opacity: 0;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	58% {
		animation-timing-function: ease-out;
		opacity: 1;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	68% {
		animation-timing-function: ease-in-out;
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	78% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	88% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	98%,
	to {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
}
@keyframes line3 {
	from,
	4% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	14% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	24% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	34% {
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	44% {
		opacity: 1;
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	49% {
		opacity: 0;
		stroke-dashoffset: 31.99;
		transform: translate(8px,16px);
	}
	52% {
		animation-timing-function: steps(1,start);
		opacity: 0;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	56% {
		animation-timing-function: ease-out;
		opacity: 1;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	66% {
		animation-timing-function: ease-in-out;
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	76% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	86% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	96%,
	to {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
}
@keyframes line4 {
	from,
	2% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	12% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	22% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	32% {
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	42% {
		opacity: 1;
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	47% {
		opacity: 0;
		stroke-dashoffset: 31.99;
		transform: translate(8px,16px);
	}
	50% {
		animation-timing-function: steps(1,start);
		opacity: 0;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	54% {
		animation-timing-function: ease-out;
		opacity: 1;
		stroke-dashoffset: 32;
		transform: translate(0,16px);
	}
	64% {
		animation-timing-function: ease-in-out;
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	74% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	84% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	94%,
	to {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
}
@keyframes line5 {
	from {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	10% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	20% {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	30% {
		stroke-dashoffset: 0;
		transform: translate(0,0);
	}
	40% {
		stroke-dashoffset: -16;
		transform: translate(0,15px);
	}
	50% {
		stroke-dashoffset: -31;
		transform: translate(0,-48px);
	}
	58% {
		stroke-dashoffset: -31;
		transform: translate(0,8px);
	}
	65% {
		stroke-dashoffset: -31.99;
		transform: translate(0,-24px);
	}
	71.99% {
		animation-timing-function: steps(1);
		stroke-dashoffset: -31.99;
		transform: translate(0,-16px);
	}
	72% {
		animation-timing-function: ease-in-out;
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
	82% {
		stroke-dashoffset: 16;
		transform: translate(0,8px);
	}
	92%,
	to {
		stroke-dashoffset: 31.99;
		transform: translate(0,16px);
	}
}

Frontend Forever App